<template>
    <div class="header_container">
        <div class="nav_container clearfix">
            <ul class="left">
                <li>田利商城欢迎你!</li>
                <li><a href="">登录</a></li>
                <li>|</li>
                <li><a href="">免费注册</a></li>
            </ul>
            <ul class="right">
                <li>
                    <a href="">我的订单</a>
                </li>
                <li>
                    <span>|</span>
                </li>
                <li>
                    <a href="">我的购物车</a>
                </li>
                <li>
                    <span>|</span>
                </li>
                <li>
                    <a href="">我的商品汇</a>
                </li>
                <li>
                    <span>|</span>
                </li>
                <li>
                    <a href="">企业采购</a>
                </li>
                <li>
                    <span>|</span>
                </li>
                <li>
                    <a href="">关注商品汇</a>
                </li>
                <li>
                    <span>|</span>
                </li>
                <li>
                    <a href="">合作招商</a>
                </li>
                <li>
                    <span>|</span>
                </li>
                <li>
                    <a href="">商家后台</a>
                </li>
            </ul>
        </div>    
        <div class="search_container">
            <img src="../assets/logo.png" alt="logo图标" title="随意用的logo勿喷">
            <div class="inputCon">
                <input type="text">
                <button>搜索</button>
            </div>
        </div>
    </div>
</template>
<script>
export default{
   name: 'Header'
}
</script>
<style scoped lang="less">
.header_container{
    width: 100vw;
    height: 150px;
    background: #fff;
    .nav_container{
        width: 100%;
        line-height: 50px;
        background: rgb(236, 234, 234);
        .left{
            float: left;
            display: flex;
            margin-left: 10%;
            li{
                margin-right: 15px;
            }
            li:nth-child(3){
                color: rgb(168, 158, 158);
            }
        }
        .right{
            float: right;
            display: flex;
            margin-right: 5%;
            li{
                margin-right: 15px;
            }
            li:nth-child(2n){
                color: rgb(168, 158, 158);
            }
        }
    }
    .search_container{
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: space-between;
        padding: 0 6% 0 12%;
        align-items: center;
        box-sizing: border-box;
        img{
            width: 50px;
            height: 50px;
        }
        .inputCon{
            width: 35%;
            height: 30%;
            display: flex;
            input{
                width: 80%;
                height: 100%;
                outline: none;
                padding: 0;
                border: 1px solid #FF4200;
                padding-left: 20px;
                box-sizing: border-box;
            }
            button{
                width: 10%;
                height: 100%;
                padding: 0;
                box-sizing: border-box;
                border: 0;
                background: #FF4200;
                color: #fff;
                display: block;
            }
        }
    }
}
.clearfix::after{
    content: '';
    display: block;
    clear: both;
}
</style>
